<template>
	<view class="item  u-m-b-1" :class="topFlag?'top-flag-box':'bg_view'"  hover-class="message-hover-class"
		@tap="linkToChatting(group)">
		<view style="border-radius: 10rpx;position: relative;" class="u-m-r-16">
			<u-image :src="group.imGroup.groupAvatar" width="90" height="90" border-radius="10">
				<view slot="error"   v-if="group.imGroup.groupType==0" 
					class="u-flex u-row-center u-col-center  u-p-t-10 "
					style="width: 90rpx;height: 90rpx;background-color: #f0f0f0;border-radius: 12rpx;">
					<view>
						<image src="/static/image/default/default-user/default-user.png"
							style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
				<view slot="error" 
					v-if="group.imGroup.groupType==1"
					style="width: 90rpx;height: 90rpx;border-radius: 12rpx;background-color: #ededed;"
					class="u-flex u-row-center u-col-center" >
					<image  style="width: 90rpx;height: 90rpx;"
						 src="/static/image/default/group/chatgpt.png">
					</image>	
				</view>
				<u-loading slot="loading"></u-loading>
			</u-image>
			<template v-if="group.groupUser.unReadNum>0">
				<u-badge type="error" :is-dot="group.imGroup.groupType==1"
							:count="group.groupUser.unReadNum" is-center></u-badge>
			</template>
		</view>
		<view class="right  title-wrap" style="border-bottom: 1rpx solid #eceff4;">
			<view class="right_top">
				<view class="right_top_name u-line-1"
					style="font-size:32rpx;color:#000000;max-width:70%;">{{group.imGroup.groupName}}</view>
				<view v-if="group.imGroupMessageRef" class="right_top_time">
					<text v-if="group.imGroupMessageRef.msgId!=0">
						{{globalUtil.formatRelativeTime(group.imGroupMessageRef.createTime)}}
					</text>
					<text>&nbsp;</text>
				</view>
				<view v-else class="right_top_time"> </view>
			</view>
			<view class="right_btm" style="padding-top:10rpx;">
				<view class="u-line-1" style="max-width: 90%;font-size: 27rpx;">
					<text v-if="group.groupUser.unReadNum>0"
						class="u-m-r-4 u-margin-left-4">[{{group.groupUser.unReadNum}}条]</text>
					<template v-if="group.imGroupMessageRef.msgId==0">
						<text>[空]</text>
					</template>
					<template v-else>
						<template v-if="group.imGroupMessageRef&&group.imGroupMessageRef.lastMsgContent&&group.imGroupMessageRef.lastMsgContent.length>0">
							<text v-if="group.imGroupMessageRef.userName"
								class="u-m-r-4">{{group.imGroupMessageRef.userName}}:</text>
							<text>{{group.imGroupMessageRef.lastMsgContent}}</text>
						</template>
						<template v-else>
							<text>[空]</text>
						</template>
					</template>	
				</view>
				<view class="u-line-1">
					<u-icon v-show="group.groupUser.chatStatus==1"
						name="/static/image/chat/pinbi.png" color="#c0c4cc" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import globalUtil from '@/util/util.js';
	export default {
		name:"group-item",
		props: {
			group: {
				required:true,
				type: Object,
				default: function() {
					return null
				}
			},
			topFlag:{
				type:Boolean,
				default:false
			},
			showBadge:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				tabbarCount:0,
			};
		},
		methods:{
			//跳转聊天窗口
			linkToChatting: function(groupInfo) {
				let that = this;
				let chatGroupId = groupInfo.imGroup.groupId;
				console.log("群组id", chatGroupId);
				let param = "?chatGroupId=" + chatGroupId;
				let _url = "/pages/tabbar/group/chat/chatting";
				let chatUrl = _url + param;
				uni.navigateTo({
					url: chatUrl,
					success() {
						//聊天页面返回的时候去处理
						/* groupInfo.groupUser.unReadNum = 0;
						groupInfo.groupUser.readTime=that.globalUtil.getTimeStr(new Date().getTime());
						that.localGroupApi.updateMyGroupSetInfo(groupInfo,that,(res)=>{
							console.log("重置未读信息数量",res);
							that.$emit("resetUnreadNum",groupInfo);
						}); */
					}
				});
			},
		}
	}	
</script>

<style lang="scss" scoped>

	.bg_view {
		background-color: #ffffff;
	}
	.top-flag-box{
		background-color: #ededed;
	}

	.item {
		width: 750rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;

		.right {
			overflow: hidden;
			flex: 1 0;
			padding: 30rpx 30rpx 30rpx 10rpx;

			&_top {
				display: flex;
				justify-content: space-between;

				&_name {
					font-size: 28rpx;
					color: $u-main-color;
					flex: 0 0 450rpx;
					overflow: hidden;
				}

				&_time {
					font-size: 24rpx;
					color: $u-light-color;
				}
			}

			&_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: $u-tips-color;
				padding-top: 10rpx;

			}
		}
	}

</style>